<template>
  <div class="itemContainer">
    <Row>
      <Col span="6">
        <div class="thumbContainer">
          <img :src="imgUrl" alt="缩略图" style="width:200px;height:150px" />
        </div>
      </Col>
      <Col span="18">
        <Row class="contentContainer">
          <Col span="24" class="itemCol">
            <span class="itemTitle">{{ title }}</span>
          </Col>
          <Col span="24">
            <span class="desc">描述：{{ desc }}</span>
          </Col>
          <Col span="24">
            <Select
              v-model="selectData"
              style="width:360px"
              @on-change="changeTreeService"
            >
              <Option
                v-for="(value, index) in treeRoute"
                :key="index"
                :value="value"
                >{{ value }}</Option
              >
            </Select>
          </Col>
          <Col span="24">
            <Checkbox v-model="disabledSingle" @on-change="changeTreeService"
              >是否初始加载</Checkbox
            >
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "ServiceItem",
  data() {
    return {
      selectData: "",
      disabledSingle: false
    };
  },
  props: ["imgUrl", "title", "desc", "id", "url"],
  computed: {
    ...mapState({
      treeRoute: state => state.oneMapConfig.treeRoute,
      treeData: state => state.oneMapConfig.treeData,
      renderGrand: state => state.oneMapConfig.renderGrand
    })
  },
  methods: {
    changeTreeService() {
      if (!this.selectData) {
        return;
      }
      let route = this.selectData.split("/");
      let selected = this.disabledSingle;

      if (route[0]) {
        for (let i = 0; i < this.treeData.length; i++) {
          if (this.treeData[i].title == route[0]) {
            if (route[1]) {
              if (this.treeData[i].hasOwnProperty("expand")) {
                for (let j = 0; j < this.treeData[i].children.length; j++) {
                  let item2 = this.treeData[i].children[j];
                  if (item2.title == route[1]) {
                    if (route[2]) {
                      if (item2.hasOwnProperty("expand")) {
                        for (let k = 0; k < item2.children.length; k++) {
                          let item3 = item2.children[k];
                          if (item3.title == route[2]) {
                            if (route[3]) {
                              if (item3.hasOwnProperty("expand")) {
                                for (
                                  let q = 0;
                                  q < item3.children.length;
                                  q++
                                ) {
                                  let item4 = item3.children[q];
                                  if (item4.title == route[3]) {
                                    if (route[4]) {
                                      if (item4.hasOwnProperty("expand")) {
                                        for (
                                          let w = 0;
                                          w < item4.children.length;
                                          w++
                                        ) {
                                          let item5 = item4.children[w];
                                          if (item5.title == route[4]) {
                                            item5.url = this.url;
                                            item5.selected = selected;
                                            item5.id = this.id;
                                            item5.isShowPopup = false;
                                            item5.render = this.renderGrand;
                                          }
                                        }
                                      }
                                    } else {
                                      if (item4.hasOwnProperty("expand")) {
                                        item4.children = item4.children || [];
                                        item4.children.push({
                                          title: this.title,
                                          url: this.url,
                                          selected: selected,
                                          id: this.id,
                                          isShowPopup: false,
                                          render: this.renderGrand
                                        });
                                      } else {
                                        item4.url = this.url;
                                        item4.selected = selected;
                                        item4.id = this.id;
                                        item4.isShowPopup = false;
                                        item4.render = this.renderGrand;
                                      }
                                    }
                                  }
                                }
                              }
                            } else {
                              if (item3.hasOwnProperty("expand")) {
                                item3.children = item3.children || [];
                                item3.children.push({
                                  title: this.title,
                                  url: this.url,
                                  selected: selected,
                                  id: this.id,
                                  isShowPopup: false,
                                  render: this.renderGrand
                                });
                              } else {
                                item3.url = this.url;
                                item3.selected = selected;
                                item3.id = this.id;
                                item3.isShowPopup = false;
                                item3.render = this.renderGrand;
                              }
                            }
                          }
                        }
                      }
                    } else {
                      if (item2.hasOwnProperty("expand")) {
                        item2.children = item2.children || [];
                        item2.children.push({
                          title: this.title,
                          url: this.url,
                          selected: selected,
                          id: this.id,
                          isShowPopup: false,
                          render: this.renderGrand
                        });
                      } else {
                        item2.url = this.url;
                        item2.selected = selected;
                        item2.id = this.id;
                        item2.isShowPopup = false;
                        item2.render = this.renderGrand;
                      }
                    }
                  }
                }
              }
            } else {
              if (this.treeData[i].hasOwnProperty("expand")) {
                this.treeData[i].children = this.treeData[i].children || [];
                this.treeData[i].children.push({
                  title: this.title,
                  url: this.url,
                  selected: selected,
                  id: this.id,
                  isShowPopup: false,
                  render: this.renderGrand
                });
              }
            }
          }
        }
      }
      this.$store.dispatch("oneMapConfig/updateTreeData", this.treeData);
    }
  }
};
</script>
<style scoped>
.itemContainer {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(210, 210, 210, 1);
  transition: all 0.3s;
}
.itemContainer:hover {
  box-shadow: 0px 1px 14px 8px rgba(0, 0, 0, 0.1);
}
.thumbContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}
.contentContainer {
  padding: 15px 15px 0 0;
}
.itemTitle {
  font-size: 18px;
  font-weight: bold;
  color: rgba(74, 74, 74, 1);
}
.itemCol {
  margin-bottom: 8px;
}
.desc {
  color: rgba(56, 71, 80, 1);
}
</style>
